<script setup>
import {InfoFilled} from "@element-plus/icons-vue";
import {ref, onBeforeUpdate, inject} from "vue";
import {elErrorMessageTip} from "@/utils/MessageTipUtils.js";
import {updateAllowMailAPI, updateAuthorityAPI} from "@/api/manager.js";
import {getManagerRole} from "../../../../constants/ManagerRole.js";

// 父组件注入的数据
const {updateAllowMailVisible, updateAllowMailData, searchByCondition} = inject('updateAllowMail')

// 输入数据
const id = ref(null)
const mail = ref(null)
const role = ref(null)
const disabled = ref(null)
onBeforeUpdate(() => {
  id.value = updateAllowMailData.value.id
  mail.value = updateAllowMailData.value.mail
  role.value = updateAllowMailData.value.role
  disabled.value = updateAllowMailData.value.disabled
})

// 确认添加新权限
const confirmUpdate = async () => {
  const res = await updateAllowMailAPI(id.value, disabled.value)
  // 成功
  if (res) {
    // 重新查询权限列表
    await searchByCondition()
    updateAllowMailVisible.value = false
  }
}
// 取消添加新权限
const cancelUpdate = () => {}
</script>

<template>
  <div class="add-authority">
    <el-dialog v-model="updateAllowMailVisible" title="权限修改">
      <el-form label-position="right" label-width="110px">
        <el-form-item label="编号">{{ id }}</el-form-item>
        <el-form-item label="邮箱">{{ mail }}</el-form-item>
        <el-form-item label="角色">{{ getManagerRole(role) }}</el-form-item>
        <el-form-item label="权限是否禁用">
          <el-radio-group v-model="disabled" class="ml-4">
            <el-radio :label="true">禁用</el-radio>
            <el-radio :label="false">开放</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="flex justify-end items-center">
        <el-popconfirm
            confirm-button-text="确认"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="是否确认提交管理员邮箱修改？"
            @confirm="confirmUpdate"
            @cancel="cancelUpdate"
        >
          <template #reference>
            <el-button type="primary" plain>提交修改</el-button>
          </template>
        </el-popconfirm>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>